<template>
  <div>      
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>课程列表</span>
      </div>
    </template>
    <div class="aaa">
    <el-table :data="tableData" style="width: 100%">
    <el-table-column label="序号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="课程名称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.cjsj }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column  label="可见状态" width="150">
      <template #default="scope">
          <el-switch v-model="scope.row.value" @change="kjian(scope.row.value,scope.row.name)"/>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="edt(scope.row.name)"
          ><el-icon><edit-pen /></el-icon></el-button>
          <el-button size="small" @click="zygl(scope.row.name)"
          ><el-icon><files /></el-icon></el-button>
          <el-button size="small" @click="zybp(scope.row.name)"
          ><el-icon><monitor /></el-icon></el-button>
          <el-button size="small" @click="kk(scope.row.name)"
          ><el-icon><school /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
    {{ser}}
  </div>
  </el-card>
  </div>
</template>
<script>
import {EditPen,Files,Monitor,School} from "@element-plus/icons-vue"
import { ElMessage } from 'element-plus'

export default {
    data(){
        return{
            tableData:[
                {
                    date:1,
                    name:"java程序设计",
                    cjsj:"2020-12-12",
                    value:true
                },
                {
                  date:2,
                  name:"MySQL数据库技术",
                  cjsj:"2021-12-11",
                  value:true
                },
                {
                  date:3,
                  name:"Web前端开发基础",
                  cjsj:"2021-12-11",
                  value:true
                },
                {
                  date:4,
                  name:"Web前端项目开发实战",
                  cjsj:"2021-12-11",
                  value:true
                }
            ],
            ser:""
        }
    },
    components:{
      EditPen,
      Files,
      Monitor,
      School
    },
    methods:{
      edt(s){
        this.ser="正在编辑"+s
      },
      zygl(s){
        this.ser="正在资源管理"+s
      },
      zybp(s){
        this.ser="正在资源编排"+s
      },
      kk(s){
        this.ser="正在开课"+s
      },
      kjian(s,b){
        if(s){
        ElMessage({message:b+"课程现在是可见的",type:'success'})
        }else{
        ElMessage({message:b+'课程现在不可见',type:'warning'})
        }
      }
    }
}
</script>
<style>
.aaa{
  text-align: center;
  min-height: 200px;
}
</style>
